<template>
	<view class="pdbJr pb30" >
		<u-navbar :border-bottom="false" title="绑定业务员" :background="background" back-icon-color="#FFFFFF"
			title-color="#FFFFFF"></u-navbar>
		<view class="pr pb30" >
			<img src="../static/goods.png" class="goods"></img>
			<view class="pr content pdbJr">
				<!-- <img src="../static/bg-wh.png" class="bg"></img> -->
				<view class="">
					<view class="u-text-center">
						<img src="../static/logo.png" class="logo mt20"></img>
					</view>
					<view class="app-theme fs26  u-text-center">
						大宗农产品交易平台
					</view>
					<view class="desc c3 fs24 fw5 mt30">
						宅美批发商城是一家从事农产品供应批发平台,集产地资源、优
						势的价格、统一配送、品质保证等于一体化服务平台。为
						餐饮店、农批、农贸等场景提供赋能，助力店老板降本增
						效。
					</view>
				</view>
				<view class="u-text-center info">
					<view class="u-text-center" style="width: 120rpx;height: 120rpx;margin: 0 auto;">
						<u-image :src="userInfo.headImage"  style="margin: 0 auto;" width="120" height="120" borderRadius="50%"></u-image>
					</view>
					<view class="mt16 c3 fs30 fwb">
						{{userInfo.nickName||'--'}}
					</view>
					<view class="fs24 fwb mt55 theme">
						您的专属邀请码
					</view>
					<view class=" fwb mt10 theme code mb13">
						{{userCode||'--'}}
					</view>
					<u-button v-if="!TOKEN" :loading="loading"  type="success" ripple shape="circle" :custom-style="customStyle"
						@click.stop="handleLogin()" >
						登录
						</u-button>
						<template v-else>
							<!-- <u-button :loading="loading"  ripple type="success" shape="circle" :custom-style="customStyle"
								@click.stop="userMemberBind">
								立即绑定
								</u-button> -->
							<!-- 	<u-button @click="handleHome" v-else  type="success" ripple shape="circle" :custom-style="customStyleDone"
									>
									已绑定，去逛逛
									</u-button> -->
						</template>
					
				</view>
			</view>
			<!-- <view class="" >
				<u-button   style="width: 702rpx;" type="success" shape="circle" :custom-style="customStyle"
					@click.stop="handleLogin">
					登录
					</u-button>
			</view>
			<template v-else>
				<view class=" p30" v-if="bindUser.nickName">
					<u-button   :loading="loading" style="width: 702rpx;" type="success" shape="circle" :custom-style="customStyle"
						@click.stop="userMemberBind">
							已绑定
						</u-button>
				</view>
				<view class="" v-else>
					立即绑定
				</view>
			</template> -->
		</view>
		<LoginPopup :checkAddress="false" @loginSuccess="loginSuccess" ref="LoginPopup"></LoginPopup>
	</view>
</template>

<script>
	import {
		userMemberBind,
		getAntUserInfo,
		getAntUser
	} from '@/api/common.js'
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(90deg, #0170E1 0%, #46A2FF 100%)',
					borderColor: '#33B775',
					width:'181rpx'
				},
				customStyleDone: {
					background: 'linear-gradient(90deg, #0170E1 0%, #46A2FF 100%)',
					borderColor: '#33B775',
					width:'281rpx'
				},
				background: {
					background: 'transparent'
				},
				userCode: '',
				userName: '',
				bindUser: {
					nickName: ''
				},
				userInfo: {}
			}
		},
		onLoad(option) {
			if (option.code) {
				this.userCode = option.code
			} else {
				let url = decodeURIComponent(option.q);
				this.userCode = this.$common.getQueryVariable(url, 'code');

			}
			// 根据code 查询业务员的信息
			this.blur(this.userCode)
			this.getInfo()
			this.userMemberBind()
		},
		methods: {
			handleHome(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			loginSuccess() {
				this.getInfo()
				this.userMemberBind()
			},
			handleLogin() {
				this.$refs.LoginPopup.checkLogin()
			},
			getInfo() {
				if (!this.TOKEN) return
				getAntUser().then(res => {
					if (res.code == 200) {
						this.bindUser = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			// 反查业务员
			blur(e) {
				getAntUserInfo({
					userCode: e
				}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			userMemberBind() {
				if (!this.TOKEN) return
				this.loading = true
				userMemberBind({
					userCode: this.userCode
				}).then(res => {
					if (res.code == 200) {
						this.$u.toast('绑定成功')
						setTimeout(() => {
							this.handleHome()
						}, 1000)
					} else {
						setTimeout(() => {
							this.handleHome()
						}, 1000)
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #0170E1;
	}
</style>
<style scoped lang="scss">
	.info{
		margin-top: 125rpx;
	}
	.theme{
		color: #0170E1;
	}
	.code{
		font-size: 104.71rpx;
	}
	.bg {
		width: 698rpx;
		height: 1203rpx;
		position: absolute;

	}

	.content {
		z-index: 2;
		top: 200rpx;
		left: 26rpx;
		background-image: url('../static/bg-wh.png');
		background-size: 100% ;
		background-repeat: no-repeat;
		width: 698rpx;
		height: 1233rpx;
		padding: 20rpx 46rpx;

		.desc {
			line-height: 36rpx;
			width: 606rpx;
		}

		.logo {
			width: 181rpx;
			height: 52rpx;
		}
	}

	.goods {
		width: 750rpx;
		height: 378rpx;
		position: absolute;
		z-index: 1;
		top: 0;
	}
</style>